export const GraphChart = {
  drawWord(id, datas) {
    let referNum = 7

    /**
     * 获取标签长度
     * @param val
     * @param size
     * @returns {{width: number, height: *, length: number}}
       */
    function getTextWH(val, size) {
      let chinaLength = val.match(/[\u4e00-\u9fa5]/g).length
      let englishLength = val.length - chinaLength
      let offsetW = 30
      let offsetH = 18
      let len = chinaLength + englishLength / 2
      let width = chinaLength * size + Math.ceil(englishLength / 2) * size
      if (len > referNum) {
        width = Math.ceil(len / 2) * size
      }

      return {width: width + offsetW, height: size + offsetH, length: len}
    }

    let echarts = window.echarts
    let myChart = echarts.init(document.getElementById(id))

    function getProcessData(data) {
      let arr = []
      let names = []
      let processData = []

      data.reduce((a, b) => {
        if (names.indexOf(b.name) === -1) {
          names.push(b.name)
          processData.push(b)
          arr.push(b.value)
        }
        return processData
      }, [])
      let min = Math.min.apply(null, arr)
      let max = Math.max.apply(null, arr)

      return {min: min, max: max, data: processData}
    }
    let processData = getProcessData(datas.data)
    let fontThreshold = [10, 24]
    let seriesData = []
    processData.data.map((item, index) => {
      let size = fontThreshold[0] + Math.ceil(item.value / ((processData.max - processData.min) * 1.05) * (fontThreshold[1] - fontThreshold[0]))
      let wh = getTextWH(item.name, size)
      item.symbolSize = [wh.width, wh.height]
      item.label = {
        fontSize: size
      }
      seriesData.push(item)
    })
    let option = {
      tooltip: {
        formatter: '\t{b}:\t{c}\t',
        padding: [8, 12, 8, 12],
        textStyle: {
          color: '#666'
        },
        borderWidth: 1,
        borderColor: '#dedede',
        backgroundColor: '#fff',
        extraCssText: 'box-shadow: 4px 4px 8px 0px rgba(6, 15, 53, 0.1);'
      },
      visualMap: {
        show: false,
        type: 'continuous',
        min: 0,
        max: processData.max * 1.05,
        color: ['rgba(238,73,1,1)', 'rgba(238,73,1,.5)', 'rgba(74,135,236,.5)', 'rgba(110,167,244,.5)', 'rgba(110,167,244,.1)'],
        textStyle: {
          color: '#fff'
        },
        seriesIndex: 0
      },
      animationDurationUpdate: 1500,
      animationEasingUpdate: 'quinticInOut',
      series: [
        {
          type: 'graph',
          layout: 'force',
          force: {
            repulsion: 100
          },
          symbol: 'rect',
          roam: true,
          label: {
            normal: {
              show: true,
              formatter: function(val) {
                let name = val.name
                let len = getTextWH(name).length
                if (len > referNum) {
                  return name.substring(0, Math.ceil(len / 2)) + '\n' + name.substring(Math.ceil(len / 2), len)
                }
                return name
              }
            }
          },
          data: [...seriesData]
        }
      ]
    }

    myChart.clear()
    myChart.setOption(option)
  }
}



// WEBPACK FOOTER //
// ./src/assets/js/chart/graphChart.js